<template>
	<view class="login">
		<form @submit="handleClick" @reset="formReset" class="form-one">
			<view class="userName">
				<text class="text-sty">账号：</text>
				<input type="text" v-model="listData.account" class="input-acc">
			</view>
			<view class="userPassword">
				<text class="text-sty">密码：</text>
				<input type="password" v-model="listData.passWord" class="input-acc">
			</view>
			<view class="valCode">
				<text class="text-sty">验证码：</text>
				<input type="valCode" v-model="listData.valCode" class="input-code">
				<image :src="valCode" @click="getCode" class="valCode-one"></image>
			</view>
			<button type="primary" form-type="submit" class="btnLogin">登陆</button>
			<!-- <button type="default" form-type="reset">重置</button> -->
		</form>
	</view>
</template>

<script setup>
	import ajax from "../../util/request"
	import axios from "../../util/request-1"
	import {
		reactive,
		ref
	} from "vue"
	const listData = reactive({
		account: 'test01',
		passWord: '123123',
		valCode: ''
	})
	const valCode = ref()
	const getCode = () => {
		axios("/petsystem/user/valCode", {}, "GET").then((res) => {
			console.log(res)
			valCode.value = res.data.data;
			// console.log(res.header.token);
			// console.log(token);
			uni.setStorage({
				key: "token",
				data: res.header.token,
				success: () => console.log('存储成功')
			})
		})
	}
	getCode()

	function handleClick() {
		ajax("/petsystem/user/login", listData, "POST").then((res) => {
			console.log(res, "这是登录拿到的数据");
			if (res.data.code == 0) {
				// console.log("跳转个人页面");
				uni.switchTab({
					url: '/pages/my/my'
				})
				uni.setStorage({
					key: "token",
					data: res.header.token,
					// success: () => console.log('存储成功')
				})
				uni.setStorage({
					key: "sag",
					data: res.data.data,
					// success: () => console.log('存储成功')
				})
				uni.showToast({
					title: '登录成功',
					duration: 3000//单位毫秒
				});
			}else{
				uni.showToast({
					title: '验证码错误',
					icon:"none"
				});
			}
		})
	}

	function formReset(e) {
		console.log('清空数据')
	}
</script>

<style scoped lang="scss">
	.login {
		background-color: ghostwhite;
		height: 100vh;
	}

	input {
		border: 1px solid black;
	}

	.form-one {
		width: 100%;
		height: 500px;
	}

	.userName,
	.userPassword,
	.valCode{
		padding: 30px;
		.text-sty{
			font-size: 20px;
		}
		.input-code{
			width: 50%;
			height: 50px;
			padding: 10px;
			margin-top: 20px;
		}
		.input-acc{
			height: 50px;
			padding: 10px;
			margin-top: 20px;
		}
	}

	.valCode-one {
		position: relative;
		left: 60%;
		top: -50px;
		width: 100px;
		height: 50px;
	}

	.btnLogin {
		margin: 0 30px;
	}
</style>
